<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SvgAreaHeatmap Plugin Example</title>
    <style>
      body, html { margin:0; padding:0; height:100%; font-family:Arial;}
      #heatmapContainerWrapper { width:100%; height:100%; position:absolute; }
      #heatmapContainer { width:100%; height:100%;}
      h1 { position:absolute; background:black; color:white; padding:10px; font-weight:200;}
      #all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; border:1px solid rgba(0,0,0,.2);}
      img { background:black; }
    </style>
  </head>
  <body>
    
    <div id="heatmapContainerWrapper">
      <div id="heatmapContainer">

      </div>
        
    </div>
    <h1>Adding datapoints in real time with heatmap.js</h1>
        <div id="all-examples-info">
          <strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers &amp; inline documentation.
        </div>
    <script src="/build/heatmap.js"></script>
    <script src="/plugins/svg-area-heatmap.js"></script>
    <script>
      window.onload = function() {
        // create heatmap instance
        var heatmap = h337.create({
          container: document.getElementById('heatmapContainer'),
          svgUrl: 'austria.svg',
          plugin: 'SvgAreaHeatmap'
        });

        window.heatmap = heatmap;

        window.randomize = function(){
          var max = (Math.random()*100) >> 0;

          var dataPoints = [];
          var dataKeys = ['oberoesterreich', 'niederoesterreich', 'wien', 'burgenland', 'kaernten', 'steiermark', 'tirol', 'vorarlberg', 'salzburg'];

          for (var i = 0; i < dataKeys.length; i++) {
            dataPoints.push({ id: dataKeys[i], value: max - (Math.random() * max/2) >> 0 });
          }

          heatmap.setData({
            max: max,
            min: 0,
            data: dataPoints
          });


        };
        randomize();
      };
    </script>
  </body>
</html>